<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 数据表格</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body class="gray-bg" style="font-size: 10px;">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>用户预存</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index_v1.html">主页</a>
            </li>
            <li>
                <a href="storage.html"><strong>营销收费</strong></a>
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <a href="empty_page.html" class="btn btn-primary">活动区域</a>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">

                    <h5>用户信息</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="userinfo.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="userinfo.html#">选项1</a>
                            </li>
                            <li><a href="userinfo.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" id="userInfo">
                    <div class="ibox-query">
                        <form role="form" id="queryuser" class="form-inline">
                            <div class="form-group">
                                <label for="exampleInputEmail2" class="sr-only">用户名</label>
                                <input type="text" placeholder="请输入用户名" class="form-control" v-model="UserName">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword2" class="sr-only">用户号</label>
                                <input type="text" placeholder="请输入用户号" class="form-control" v-model="UserID">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword2" class="sr-only">设备号</label>
                                <input type="text" placeholder="请输入设备号" class="form-control" v-model="DeviceId">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword2" class="sr-only">手机号</label>
                                <input type="text" placeholder="请输入手机号" class="form-control" v-model="UserPhone">
                            </div>
                            <button class="btn btn-primary" type="button" style="margin-top: 5px;" v-on:click="goons()">
                                查询
                            </button>
                        </form>
                    </div>
                    <table id="content"
                           class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>用户名</th>
                            <th>用户号</th>
                            <th>用户地址</th>
                            <th>门牌号</th>
                            <th>户表号</th>
                            <th>户表模式</th>
                            <th>账户余额</th>
                            <th>欠费余额</th>
                        </tr>
                        </thead>
                        <tbody style="cursor: pointer">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">预存</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">退预存</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-content" id="before">
                                <form method="get" class="form-horizontal">

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">设备编号</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly="readonly" value=""
                                                   id="mechine">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">欠费总金额</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly="readonly" value=""
                                                   id="wz">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">账户余额</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly="readonly" value="" id="l">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">应缴金额</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly="readonly" value=""
                                                   id="lyb">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">表端余额</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly="readonly" value=""
                                                   id="ll">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">预存方式</label>

                                        <div class="col-sm-10">
                                            <select class="form-control m-b" name="account">
                                                <option selected="selected">平台-现金支付</option>
                                                <option>平台-微信支付</option>
                                                <option>平台-支付宝支付</option>
                                                <option>平台-刷卡支付</option>
                                            </select>

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" id="Mon">预存金额</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="money">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-4 col-sm-offset-2">
                                            <button class="btn btn-primary" type="button" v-on:click="goon()">确认交易
                                            </button>
                                            <button class="btn btn-primary" id="print1" type="button">打印收据</button>
                                            <!--class="btn btn-primary"-->
                                            <button class="btn btn-white" type="submit" id="button">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <div class="ibox-content" id="after">
                                <form method="get" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">表端余额</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly="readonly" value=""
                                                   id="wangzhe">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">退预存</label>

                                        <div class="col-sm-10">
                                            <select class="form-control m-b" name="account">
                                                <option>支付宝</option>
                                                <option>微信</option>
                                                <option>银行卡</option>
                                            </select>

                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <div class="col-sm-4 col-sm-offset-2">

                                            <button class="btn btn-primary" type="button" v-on:click="go()">确认交易
                                            </button>
                                            <button class="btn btn-primary" id="print2" type="button">打印收据</button>
                                            <button class="btn btn-white" type="submit" id="butto">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>


    <script src="js/plugins/jeditable/jquery.jeditable.js"></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <script type="text/javascript">

        var table = $('#content').DataTable({
            bFilter: false,
            bLengthChange: false,
        });
        var app = new Vue({
            el: '#before',
            data: {
                username: '',
                patientinfos: []
            },
            methods: {
                goon: function () {
                    var signal = 0;
                    //var left = document.getElementById('money').value;
                    var tt = document.getElementById('money').value;
                    var mechine_id = document.getElementById('mechine').value;
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/WaterCloud_war/user/getUserInfo",
                        success(msg) {
                            for (var i = 0; i < msg.length; i++) {
                                if (mechine_id == msg[i].deviceId) {
                                    //signal= 1;
                                    $.ajax({
                                        type: "POST",
                                        url: "http://localhost:8080/WaterCloud_war/user/updateMessage",
                                        data: "UserRemainder=" + (parseFloat(tt) + parseFloat(msg[i].userRemainder)) + "&DeviceId=" + mechine_id,
                                        success(message) {
                                            if (message == true) {
                                                alert("缴费成功！");
                                                window.location.reload();
                                            }
                                        },
                                        error: function () {
                                            alert('error');
                                        }
                                    })
                                    //alert("缴费");
                                    break;
                                }
                            }
                        }
                    })
                }
            }
        })
    </script>


    <script type="text/javascript">

        var table = $('#content').DataTable();
        var app = new Vue({
            el: '#after',
            data: {
                username: '',
                patientinfos: []
            },
            methods: {
                go: function () {
                    var tt = document.getElementById('money').value;
                    var mechine_id = document.getElementById('mechine').value;
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/WaterCloud_war/user/getUserInfo",
                        success(msg) {
                            for (var i = 0; i < msg.length; i++) {
                                if (mechine_id == msg[i].deviceId) {

                                    $.ajax({
                                        type: "POST",
                                        url: "http://localhost:8080/WaterCloud_war/user/updateMessage",
                                        data: "UserRemainder=" + 0.00 + "&DeviceId=" + mechine_id,
                                        success(message) {
                                            if (message == true) {
                                                alert("退款完成！");
                                                window.location.reload();
                                            }
                                        },
                                        error: function () {
                                            alert('error');
                                        }
                                    })
                                    //alert("退款");
                                    break;
                                }
                            }
                        }
                    })
                }
            }
        })
    </script>


    <script>

        var myTable = $('#content').DataTable(); // user_table为table的id
        $("#content").on("click", "tr", function () {
            deviceId = myTable.row(this).data()[5]; // deviceId为选中用户的设备号
            // console.log(deviceId)
            var message;
            var that = this;
            //alert(deviceId);

            $.ajax({
                type: "POST",
                url: "http://localhost:8080/WaterCloud_war/user/getUserInfo",
                success(msg) {

                    for (var i = 0; i < msg.length; i++) {
                        var list = [];
                        list.push(msg[i].id, msg[i].userName, msg[i].userId, msg[i].userDir, msg[i].doorId, msg[i].deviceId, '预付费', msg[i].userRemainder)

                        if (msg[i].deviceId == deviceId) {
                            //alert(msg[i].id);
                            document.getElementById('mechine').value = msg[i].deviceId;
                            document.getElementById('l').value = msg[i].userRemainder;
                            document.getElementById('ll').value = msg[i].userRemainder;
                            document.getElementById('wangzhe').value = msg[i].userRemainder;
                            document.getElementById('wz').value = "0.0"
                            document.getElementById('lyb').value = "0.0";
                            //var value_ = document.getElementById('money').value
                            //alert(value_);
                        }
                    }
                }
            })
        })

    </script>


    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
    </script>

    <script>
        var table = $('#content').DataTable();
        var app = new Vue({
            el: "#app",
            data: {
                userinfo: []
            },
            mounted: function () {
                var that = this;
                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/WaterCloud_war/user/getUserInfo",
                    success(msg) {
                        for (var i = 0; i < msg.length; i++) {
                            var list = [];
                            list.push(msg[i].id, msg[i].userName, msg[i].userId, msg[i].userDir, msg[i].doorId, msg[i].deviceId, '预付费', msg[i].userRemainder, '0.00')
                            table.row.add(list).draw();
                        }
                    }
                })
            }
        });
    </script>
    <script>
        var queryuser = new Vue({
            el: '#queryuser',
            data: {
                UserName: '',
                UserID: '',
                DeviceId: '',
                UserPhone: '',
                SpecifiedUser: []
            },
            methods: {
                /*提交筛选条件*/
                goons: function () {
                    var that = this;
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/WaterCloud_war/user/selectSpecifiedUser",
                        data: "UserName=" + this.UserName + "&UserID=" + this.UserID + "&DeviceId=" +
                            this.DeviceId + "&UserPhone=" + this.UserPhone,
                        success(msg) {
                            table.clear().draw();
                            for (var i = 0; i < msg.length; i++) {
                                var list = [];
                                for (var key in msg[i]) {
                                    list.push(msg[i][key]);
                                }
                                console.log(list)
                                table.row.add(list).draw();
                            }

                        }
                    })

                }
            }
        })
    </script>
    <script>
        document.getElementById('print1').addEventListener('click',function () {
            var input = document.getElementsByTagName('input');
            var textArea = document.getElementsByTagName('textarea');
            for(var i = 0; i < input.length; i++) {
                input[i].setAttribute("value",input[i].value);
            }
            for (var j = 0; j < textArea.length; j++) {
                textArea[j].innerHTML = textArea[j].value;
            }
            $("#tab-1").jqprint();
        })
        document.getElementById('print2').addEventListener('click',function () {
            var input = document.getElementsByTagName('input');
            var textArea = document.getElementsByTagName('textarea');
            for(var i = 0; i < input.length; i++) {
                input[i].setAttribute("value",input[i].value);
            }
            for (var j = 0; j < textArea.length; j++) {
                textArea[j].innerHTML = textArea[j].value;
            }
            $("#tab-2").jqprint();
        })
    </script>

    <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">
        // -----------------------------------------------------------------------
        // Eros Fratini - eros@recoding.it
        // jqprint 0.3
        //
        // - 19/06/2009 - some new implementations, added Opera support
        // - 11/05/2009 - first sketch
        //
        // Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea
        // requires jQuery 1.3.x
        //
        // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
        //------------------------------------------------------------------------

        (function($) {
            var opt;

            $.fn.jqprint = function(options) {
                opt = $.extend({}, $.fn.jqprint.defaults, options);

                var $element = (this instanceof jQuery) ? this : $(this);

                if (opt.operaSupport && $.browser.opera) {
                    var tab = window.open("", "jqPrint-preview");
                    tab.document.open();

                    var doc = tab.document;
                } else {
                    var $iframe = $("<iframe  />");

                    if (!opt.debug) {
                        $iframe.css({
                            position: "absolute",
                            width: "0px",
                            height: "0px",
                            left: "-600px",
                            top: "-600px"
                        });
                    }

                    $iframe.appendTo("body");
                    var doc = $iframe[0].contentWindow.document;
                }

                if (opt.importCSS) {
                    if ($("link[media=print]").length > 0) {
                        $("link[media=print]").each(function() {
                            doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr(
                                "href") + "' media='print' />");
                        });
                    } else {
                        $("link").each(function() {
                            doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr(
                                "href") + "' />");
                        });
                    }
                }

                if (opt.printContainer) {
                    doc.write($element.outer());
                } else {
                    $element.each(function() {
                        doc.write($(this).html());
                    });
                }

                doc.close();

                (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
                setTimeout(function() {
                    (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print();
                    if (tab) {
                        tab.close();
                    }
                }, 1000);
            }

            $.fn.jqprint.defaults = {
                debug: false,
                importCSS: true,
                printContainer: true,
                operaSupport: true
            };

            // Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
            jQuery.fn.outer = function() {
                return $($('<div></div>').html(this.clone())).html();
            }
        })(jQuery);
    </script>

</body>
</html>
